<template>
  <div>
    <!-- 购物车列表 -->
    <div class="cart">
      <div class="container">
        <div class="empty" v-if="list.length == 0">
          <img src="../../assets/img/cart/cart-empty.png" />
          <p>空空如也~ 快去挑选甜品吧~</p>
        </div>
        <div v-else>
          <table>
            <thead>
              <tr>
                <th></th>
                <th></th>
                <th>产品</th>
                <th>价格</th>
                <th>数量</th>
                <th>合计</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in list" :key="item">
                <td class="delete">
                  <img
                    src="../../assets/img/cart/delete.png"
                    @click="list.splice(i, 1)"
                  />
                </td>
                <td class="product-img">
                  <a href="#"><img :src="item.img" /></a>
                </td>
                <td class="product-name">
                  <a href="#">{{ item.name }}</a>
                </td>
                <td class="product-price">{{ item.price }}</td>
                <td class="product-count">
                  <div class="btn-adds">
                    <button
                      :disabled="item.num == 1"
                      @click="item.num--"
                      class="minus"
                    >
                      -
                    </button>
                    <span>{{ item.num }}</span>
                    <button @click="item.num++" class="plus">+</button>
                  </div>
                </td>
                <td class="product-total">{{ item.price * item.num }}</td>
              </tr>
            </tbody>
          </table>
          <div class="bottom">
            <div class="coupon">
              <input type="text" placeholder="优惠券代码" />
              <button>APPLY COUPON</button>
            </div>
            <div class="order">
              <button>UPDATE CART</button>
              <button><a href="./checkout.html">去结算</a></button>
            </div>
          </div>
          <div class="cart-total">
            <div class="cart-collaterals">
              <h2>Cart Totals</h2>
              <p>小计<span>{{total}}</span></p>
              <p>合计<span>{{total}}</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer-top></footer-top>
  </div>
</template>

<script>
import footerTop from '@/components/container/FooterTop.vue'

export default {
  components:{
    footerTop:footerTop
  },
  data() {
    return {
      list: [
        {
          img: require("../../assets/img/cart/produc_1.jpg"),
          name: "杨枝甘露凉粉",
          price: "30.00",
          num: "1",
        },
      ],
    };
  },
  computed: {
    total() {
      let price = 0;
      this.list.forEach((item) => {
        price += item.price * item.num;
      })
      return price
    },
  },
};
</script>

<style lang="scss" scoped>
.cart {
  padding: 100px 0;
}

.container {
  width: 1300px;
  margin: auto;
}
.cart .empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 200px;
}
.cart .empty p {
  font-size: 14px;
  color: #888;
}
.cart table {
  width: 100%;
  border: 1px solid #e6e6e6;
  font-size: 14px;
  border-collapse: collapse;
}

.cart table th {
  padding: 13px 10px;
  text-align: left;
}

.cart table thead {
  border: 1px solid #e6e6e6;
}

.cart table tbody tr {
  border-bottom: 1px solid #e6e6e6;
}

.cart table tbody td {
  padding: 5px 10px;
  text-align: left;
}

.cart table tbody .delete {
  border: 1px solid #e6e6e6;
  width: 88px;
  text-align: center;
}

.cart table tbody .delete img {
  display: inline-block;
  width: 13px;
  height: 13px;
}

.cart table tbody .product-img {
  vertical-align: middle;
  width: 225px;
}

.cart table tbody .product-img a {
  display: block;
}

.cart table tbody .product-img img {
  width: 66px;
  height: 48px;
}

.cart table tbody .product-price {
  width: 195px;
}

.product-name a,
.product-price,
.product-total {
  color: #888;
  font-weight: 200;
}

.product-price::before,
.product-total::before {
  content: "￥";
}

.cart table tbody .product-count {
  width: 245px;
}

.cart table tbody .product-count .btn-adds {
  display: flex;
  align-items: center;
}

.cart table tbody .product-count .btn-adds span {
  width: 32px;
  font-size: 17px;
  font-weight: bold;
  color: #666;
  padding: 0 5px;
  margin: 0 6px;
  text-align: center;
}

.minus,
.plus {
  padding: 0;
  width: 17px;
  height: 17px;
  background-color: #bcbcbc;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.minus:hover,
.plus:hover {
  background-color: #7a5b4a;
}

.cart table tbody .product-total {
  width: 163px;
}

.cart .bottom {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
}

.cart .bottom input {
  outline: none;
  border: none;
  width: 204px;
  height: 36px;
  padding: 5px 13px;
}

.cart .bottom button {
  height: 38px;
  background-color: #7a5b4a;
  border: 1px solid #7a5b4a;
  color: #fff;
  padding: 0 22px;
  margin-left: 15px;
}
.cart .bottom button > a {
  color: #fff;
}

.cart .bottom button:hover,
.cart .bottom button:hover > a {
  background-color: #fff;
  color: #7a5b4a;
}

.cart .cart-total {
  margin-top: 20px;
  height: 146px;
}
.cart .cart-total .cart-collaterals {
  width: 26%;
  float: right;
}
.cart .cart-total h2 {
  font-size: 18px;
  font-weight: 300;
  color: #333;
  margin-bottom: 15px;
}

.cart .cart-total p {
  color: #888;
  font-size: 14px;
}

.cart .cart-total p span {
  display: inline-block;
  padding: 5px 10px;
}

.cart .cart-total p span::before {
  content: "￥";
}

.cart .cart-total p:first-child span {
  font-weight: lighter;
}

.cart .cart-total p:last-child span {
  font-size: 20px;
  color: #7a5b4a;
}

</style>